<template>
	<view class="m-position">
		<view class="item" v-for="(item, index) in list" :key="index" @click="onClick(item)">
			<view class="resume">
			<view class="title">
				<image class="right" v-if="item.avatar" :src="item.avatar"></image>
				<image class="right" v-else src="/static/img/head.png.png"></image>
				<view class="left">
					<view class="">
						<text :class="item.applyStatus>1?'name-read':'name'">{{item.name}}</text>
						<!-- <text class="yzb yzb-nan" v-if="item.resume.sex==1"></text> -->
						<!-- <text class="yzb yzb-nv" v-if="item.resume.sex==2"></text> -->
						<!-- <text class="read-status" v-if="item.applyStatus==1">【未读】</text> -->
						<!-- <text class="read-status" v-if="item.status==2">【已录用】</text> -->
						<text class="title-share" v-if="item.ifReference">内推</text>
					</view>
					<view class="skill">
						{{formatAge(item.timeToWork)}}年
						<view class="height-line"></view>
						{{item.education}}
						<view class="height-line"></view>
						{{formatAge(item.birthday)}}岁
					</view>
				</view>
			</view>
			<view class="position">
				<view class="position-left">
					<text>应聘岗位：</text>
					<text :class="item.ifRead?'title-read':'title'">{{item.postName}}</text>
				</view>
				<text class="right">{{formatCreateTime(item.createTime)}}</text>
			</view>
			<!-- <view class="exp space-between">
				<view class="exp-item-read">
					<text class="yzb yzb-gongzuobao top-icon"></text>
					<text>内推人：企业HR - 张三丰</text>
				</view>
				<text class="yzb yzb-next"></text>
			</view> -->
		</view>
		</view>
	</view>
</template>

<script>
	import mEmptyData from '@/components/m-empty-data/m-empty-data.vue';
	import {
		formatDate,
		calCurrentYear
	} from '@/common/date';
	export default {
		name: 'm-position',
		props: {
			list: Array,
			type: Number
		},
		components: {
			mEmptyData
		},
		data() {
			return {
				no_order_1: this.$mAssetsPath.no_order_1
			};
		},

		methods: {
			onClick(item) {
				this.$emit('click', item);
			},
			deleteItem(item) {
				this.$emit('onDelete', item);
			},

			ensure(item) {
				this.$emit('ensure', item);
			},

			formatAge(birthday) {
				return calCurrentYear(birthday);
			},
			formatString(val) {
				return val.split(",");
			},
			formatCreateTime(time) {
				console.log("formatCreateTime", time);
				if (time == null || time === '') {
					return null;
				}
				let str = time.replace(/-/g, '/');
				let date = new Date(str);
				return formatDate(date, 'yyyy-MM-dd hh:mm');
			},
		}
	};
</script>

<style lang="scss">
	.m-position {
		.item {
			background-color: $bgcolor_white;
			padding: 30upx 20upx;
			// margin-bottom: 20upx;
			border-bottom: 3upx solid $border-color-light;
		}

		.job {
			.title {
				.left {
					font-weight: bold;
					font-size: $uni-font-size-lg;
				}

				.title-name {
					font-weight: bold;
					font-size: $uni-font-size-lg;
				}

				.title-share {
					color: $main-color;
					border: 1upx solid $main-color;
					border-radius: 20upx 0upx;
					// height: 38upx;
					// width: 130upx;
					font-size: $uni-font-size-sm;
					margin-left: 20upx;
					padding: 0upx 10upx;
				}

				.right {
					color: $uni-color-warning;
					font-weight: bold;
				}
			}

			.company {
				color: $font-color-666;
				margin-top: 5upx;
				font-size: $uni-font-size-base;
				display: flex;
				flex-direction: row;
				align-items: center;

				.height-line {
					height: 20upx;
					width: 4upx;
					background-color: $font-color-ccc;
					margin: 0 15upx;
				}
			}

			.desc {
				margin-top: 10upx;

				text {
					font-size: $uni-font-size-base;
					padding: 5upx 10upx;
					margin-right: 15upx;
					background-color: $border-color-base;
					border-radius: 5upx;
					color: $font-color-666;
				}
			}

			.user {
				margin-top: 25upx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				image {
					width: 60upx;
					height: 60upx;
					border-radius: 30upx;
				}

				.left {
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: $uni-font-size-base;

					.name {
						margin: 0 20upx;
					}

					.post {
						// color: $font-color-666;
					}
				}

				.right {
					display: flex;
					flex-direction: row;
					align-items: center;
					color: $font-color-666;
					font-size: $uni-font-size-base;

					.area {
						margin-right: 15upx;
					}

					.yzb-shanchu {
						font-size: $font-size-40;
						color: $uni-color-error;
					}
				}
			}
		}

		.resume {
			.title {
				display: flex;
				flex-direction: row;
				align-items: center;
				.left {
					margin-left: 20upx;
					display: flex;
					flex-direction: column;

					.name {
						font-weight: bold;
						font-size: $uni-font-size-lg;
					}

					.yzb-yirenzheng1 {
						font-weight: bold;
						font-size: 34upx;
						color: $uni-color-success;
						margin-right: 10upx;
					}

					.name-read {
						font-weight: bold;
						font-size: $uni-font-size-lg;
						color: $font-color-666;
					}

					.read-status {
						margin-left: 20upx;
						font-size: $uni-font-size-base;
						color: $font-color-red;
					}
					
					.title-share {
						color: $main-color;
						border: 1upx solid $main-color;
						border-radius: 20upx 0upx;
						font-size: $uni-font-size-sm;
						margin-left: 20upx;
						padding: 3upx 10upx;
					}

					.yzb-nan {
						color: #12ae85;
						font-weight: bold;
						font-size: 34upx;
						margin-left: 10upx;
					}

					.yzb-nv {
						color: #FF6A6A;
						font-weight: bold;
						font-size: 34upx;
						margin-left: 10upx;
					}

					.skill {
						color: $font-color-666;
						margin-top: 5upx;
						font-size: $uni-font-size-base;
						display: flex;
						flex-direction: row;
						align-items: center;

						.height-line {
							height: 20upx;
							width: 4upx;
							background-color: $font-color-ccc;
							margin: 0 15upx;
						}
					}
				}

				.right {
					width: 120upx;
					height: 120upx;
					border-radius: 60upx
				}
			}

			.company {
				color: $font-color-666;
				margin-top: 15upx;
				font-size: $uni-font-size-base;

				.left {
					margin-right: 15upx;
				}
			}

			.exp {
				line-height: 1.2;

				.exp-item {
					display: flex;
					flex-direction: row;
					align-items: center;
					line-height: 1.2;

					.top-icon {
						margin-right: 10upx;
						margin-top: 3upx;
					}
				}

				.exp-item-read {
					color: $font-color-666;
				}
			}

			.desc {
				margin-top: 25upx;
				flex-wrap: wrap;

				text {
					font-size: $uni-font-size-base;
					padding: 5upx 10upx;
					margin-right: 15upx;
					background-color: $border-color-base;
					border-radius: 5upx;
					color: $font-color-666;
				}
			}

			.position {
				margin-top: 5upx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				color: $font-color-666;
				align-items: center;
				
				.position-left{
					display: flex;
					flex-direction: row;
					align-items: center;
				}

				.title {
					font-size: $uni-font-size-lg;
					color: $font-color-orange;
				}

				.title-read {
					font-size: $uni-font-size-lg;
					color: $font-color-666;
				}
			}

			.user {
				margin-top: 35upx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				image {
					width: 60upx;
					height: 60upx;
				}

				.left {
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: $uni-font-size-base;

					.name {
						margin: 0 20upx;
					}

					.post {
						// color: $font-color-666;
					}
				}

				.right {
					display: flex;
					flex-direction: row;
					align-items: center;
					color: $font-color-666;
					font-size: $uni-font-size-base;

					.area {
						margin-right: 15upx;
					}

				}
			}

			.btn-ensure {
				font-size: 30upx;
				color: $main-color;
			}
		}

	}

	.space-between {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
	}
</style>